<template>
  <div class="content">
    <div class="actionBtn">
      <el-button type="primary" plain @click="dialogVisible=true">新增</el-button>
    </div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" />
      <el-table-column prop="id" label="字典ID" align="center" />
      <el-table-column prop="name" label="字典标签" align="center" />
      <el-table-column prop="value" label="字典键值" align="center" />
      <el-table-column prop="sort" label="排序" align="center" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <!-- handleStatusChange -->
          <el-tag v-if="scope.row.enableStatus==0">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="des" label="备注" align="center" />
      <el-table-column label="创建时间" prop="gmtCreate" min-width="170" align="center" />
      <el-table-column label="操作" align="center" fixed="right" min-width="200">
        <template #default="scope">
          <el-button type="primary" text @click="handleClick(scope.row,1)" icon="Edit">编辑</el-button>
          <el-button type="primary" text @click="handleClick(scope.row,2)" icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="新增/编辑字典数据" width="600" :before-close="handleClose">
      <el-form label-width="100" :model="form" :rules="rules" ref="formEl">
        <el-form-item label="数据标签" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item label="数据键值" prop="value">
          <el-input v-model="form.value" placeholder="请输入字典值" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.enableStatus" :active-value="0" :inactive-value="1"></el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" :min="0" />
        </el-form-item>
        <el-form-item prop="des" label="备注">
          <el-input v-model="form.des" placeholder="请输入备注" type="textarea" :autosize="{ minRows : 4 }" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
const route = useRoute();

let tableData = ref([]);
let dialogVisible = ref(false);
let loading = ref(false);
let form = ref({
  des: "",
  enableStatus: 0,
  name: "",
  sort: 0,
  value: "",
  pid: null,
});
let pid = null; //父级id
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
  value: [{ required: true, message: "请输入字典键值", trigger: "blur" }],
});

onMounted(() => {
  pid = route.query.pid;
  getInfo();
});

let getInfo = async () => {
  tableData.value = await proxy.$apis.getSonByPid({ pid });
};
let handleSelectionChange = (e) => {
  let ids = [];
  e.forEach((element) => {
    ids.push(element.id);
  });
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!proxy.$refs.formEl) return;
  await proxy.$refs.formEl.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      console.log("error submit!", fields);
    }
  });
};
let save = async () => {
  try {
    loading.value = true;
    form.value.pid = pid;
    if (form.value.id) {
      await proxy.$apis.dictionaryUpdate(form.value);
    } else {
      await proxy.$apis.dictionaryAdd(form.value);
    }
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

let handleClose = () => {
  form.value = {
    des: "",
    enableStatus: 0,
    name: "",
    sort: 0,
    value: "",
    pid: null,
  };
  proxy.$refs.formEl.resetFields();
  getInfo();
  dialogVisible.value = false;
};
let handleClick = async (row, num: Number) => {
  switch (num) {
    case 1:
      let resp = await proxy.$apis.dictionaryDetail({ id: row.id });
      form.value = proxy.$utils.formatFunction(resp, { ...form.value });
      form.value.id = row.id;
      dialogVisible.value = true;
      break;
    case 2:
      let result = await proxy.$utils.confirmTips("是否确定删除?");
      if (!result) return;
      await proxy.$apis.dictionaryDel(row.id);
      proxy.$utils.showToast("删除成功");
      getInfo();
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
  .actionBtn {
    margin-bottom: 20px;
  }
}
</style>
